<template>
  <el-dialog title="日程上报" :visible.sync="dialogFormVisible" width="70%">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单编号">{{ orderInfo.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="订单预约时间">{{ orderInfo.rentalStartTime }}至{{ orderInfo.rentalEndTime }}</el-descriptions-item>
          <!--         <el-descriptions-item label="车辆填报最后公里数">{{orderInfo.maxKilometers}}/km</el-descriptions-item>-->
          <el-descriptions-item label="司机名称">{{ orderInfo.driverName }}</el-descriptions-item>
          <el-descriptions-item label="司机类型">{{ orderInfo.driverType == 1 ? '内部司机' : '外部司机' }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="24" style="margin-top: 20px">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="上报日期" prop="useDate">
                <el-date-picker
                  style="width: 240px"
                  v-model="form.useDate"
                  type="date"
                  align="right"
                  placeholder="请选择上报日期"
                  :picker-options="startPickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上报时间">
                <el-time-picker
                  style="width: 240px"
                  is-range
                  v-model="timeRange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  @change="changeTime"
                >
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">

            <el-col :span="12">
              <el-form-item label="用车时长(小时)" prop="vehicleDuration">

                <el-input-number v-model="form.vehicleDuration" :precision="0" :min="1" :max="24" label="请输入用车时长"></el-input-number>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开始公里数" prop="useStartKilometers">
                <el-input v-model="form.useStartKilometers" placeholder="请输入开始公里数"
                          @keyup.native="form.useStartKilometers = oninput(form.useStartKilometers, 2)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束公里数" prop="useEndKilometers">
                <el-input v-model="form.useEndKilometers" placeholder="请输入结束公里数"
                          @keyup.native="form.useEndKilometers = oninput(form.useEndKilometers, 2)"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="form.remark" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="commitReportInfo">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {reportGetInfo, charteredAddReport} from "@/api/charteredBus/detail";
import moment from "moment";

export default {
  components: {},
  data() {
    // 这里存放数据
    return {
      orderNo: '',
      dialogFormVisible: false,
      timeRange: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 8, 40)],
      form: {
        orderNo: null,
        useStartTime: null,
        useEndTime: null,
        useDate: null,
        useStartKilometers: null,
        useEndKilometers: null,
        vehicleDuration: 1,
        remark: null,
        driverId: null,
        driverName: null,
        driverType: null,
        carId: null,
        carNo: null,
      },
      rules: {
        useDate: [
          {required: true, message: '上报日期不能为空', trigger: 'change'}
        ],
        useStartTime: [
          {required: true, message: '上报时间不能为空', trigger: 'change'}
        ],
        vehicleDuration: [
          {required: true, message: '用车时长不能为空', trigger: 'blur'}
        ],
        useStartKilometers: [
          {required: true, message: '用车开始公里数不能为空', trigger: 'blur'}
        ],
        useEndKilometers: [
          {required: true, message: '用车结束公里数不能为空', trigger: 'blur'}
        ]
      },
      orderInfo: {},
      startPickerOptions: null,
      maxKilometers: null,

    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 方法集合
  methods: {
    show(orderNo) {
      this.orderNo = orderNo;
      this.dialogFormVisible = true
      this.timeRange = [new Date(2023, 9, 10, 8, 0), new Date(2023, 9, 10, 8, 0)]
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.getOrderInfo()
      })

      this.form.useStartTime = this.timeRange[0] ;
      this.form.useEndTime = this.timeRange[1];
    },

    getOrderInfo() {
      reportGetInfo(this.orderNo).then(res => {
        this.orderInfo = res.data
        if(res.data.maxKilometers == null){
          res.data.maxKilometers = 0;
        }
        this.maxKilometers = res.data.maxKilometers
        this.form.useStartKilometers = res.data.maxKilometers
        this.form.orderNo = this.orderNo
        this.form.driverId = this.orderInfo.driverId
        this.form.driverName = this.orderInfo.driverName
        this.form.driverType = this.orderInfo.driverType
        this.form.carId = this.orderInfo.carId
        this.form.carNo = this.orderInfo.carNo

        let startTime = moment(this.orderInfo.rentalStartTime).format('YYYY-MM-DD') + ' 00:00:00'
        let endTime =moment(this.orderInfo.rentalEndTime).format('YYYY-MM-DD') + ' 23:59:59'

        this.startPickerOptions = {
          disabledDate: (time) => {
            return time.getTime() < moment(startTime).valueOf() || time.getTime() > moment(endTime).valueOf();
          }
        }
      })
    },
    changeTime(e) {
      console.log('------', e)
      this.form.useStartTime = e[0] ;
      this.form.useEndTime = e[1];
    },

    // 提交上报信息
    commitReportInfo() {

      if(this.maxKilometers){
        console.log('aaa', this.form.useStartKilometers, this.maxKilometers)
        if(this.form.useStartKilometers<this.maxKilometers){
          this.$message.error("开始公里数需大于等于"+this.maxKilometers)
          return
        }
      }

      if(this.form.useEndKilometers<this.form.useStartKilometers){
        this.$message.error("结束公里数需大于开始公里数")
        return
      }


      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.useDate = moment(this.form.useDate).format('YYYY-MM-DD')
          // this.form.useStartTime = `${this.form.useDate} ${this.form.useStartTime}`
          this.form.useStartTime = `${moment(this.form.useDate).format('YYYY-MM-DD')} ${moment(this.form.useStartTime).format('HH:mm:ss')}`
          // this.form.useEndTime = `${this.form.useDate} ${this.form.useEndTime}`
          this.form.useEndTime = `${moment(this.form.useDate).format('YYYY-MM-DD')} ${moment(this.form.useEndTime).format('HH:mm:ss')}`
          charteredAddReport(this.form).then(res => {
            this.$message({
              type: 'success',
              message: '上报成功'
            });
            this.$emit('success')
            this.close();

          })
        }
      })
    },
    close() {
      this.dialogFormVisible = false
    }

  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },

}
</script>

<style lang="scss" scoped>
</style>
